<template>
	<view class="energy-saving-page">

		<!-- 一、能源生产与存储 -->
		<view class="section">
			<view class="section-title">
				<text class="dot">1、</text>能源生产与存储
			</view>

			<!-- 1. 清洁能源技术 -->
			<view class="sub-section">
				<view class="sub-title">1. 清洁能源技术</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 太阳能：</text>
					<text class="flex-1">高效光伏电池（如钙钛矿太阳能电池，转换效率超30%）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2"> </text>
					<text class="flex-1">光热发电（CSP）技术，搭配熔盐储热实现24小时供电。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 风能：</text>
					<text class="flex-1">漂浮式海上风机（突破深海区域限制）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2"> </text>
					<text class="flex-1">智能风机（AI调节叶片角度，提升发电效率20%+）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 氢能：</text>
					<text class="flex-1">绿氢电解槽（利用风光过剩电力制氢）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2"> </text>
					<text class="flex-1">氢燃料电池（用于交通/工业，零碳排放）。</text>
				</view>
			</view>

			<!-- 2. 能源存储 -->
			<view class="sub-section">
				<view class="sub-title">2. 能源存储</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 新型电池：</text>
					<text class="flex-1">钠离子电池（低成本替代锂电，适用于储能电站）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2"> </text>
					<text class="flex-1">固态电池（更高能量密度，电动车续航提升50%）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 重力储能：</text>
					<text class="flex-1">利用废弃矿井或高塔实现 “重力电池”（如Energy Vault系统）。</text>
				</view>
			</view>
		</view>

		<!-- 二、工业节能 -->
		<view class="section">
			<view class="section-title">
				<text class="dot">2、</text>工业节能
			</view>

			<!-- 1. 智能优化 -->
			<view class="sub-section">
				<view class="sub-title">1. 智能优化</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 数字孪生：</text>
					<text class="flex-1">实时模拟工厂能耗，优化生产流程（如西门子Xcelerator平台）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● AI预测维护：</text>
					<text class="flex-1">减少设备空转能耗，降低故障率（如GE Predix平台）。</text>
				</view>
			</view>

			<!-- 2. 低碳工艺 -->
			<view class="sub-section">
				<view class="sub-title">2. 低碳工艺</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 碳捕集与封存（CCUS）：</text>
					<text class="flex-1">捕捉工业排放的CO₂并封存或再利用（如冰岛 “Orca” 直接空气捕集厂）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 电炉炼钢：</text>
					<text class="flex-1">替代焦炭炼钢，减少90%碳排放（如瑞典HYBRIT项目）。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// const pageLoaded = ref(false)

	// const toKnowledge = () => {
	// 	uni.navigateTo({
	// 		url: '/pages/knowledge/knowledge'
	// 	})
	// }

	// onMounted(() => {
	// 	pageLoaded.value = true
	// })
</script>

<style scoped>
	/* 基础样式 */
	.energy-saving-page {
		padding: 30rpx;
		min-height: 100vh;
		background-image: url('@/static/images/knowledge-bg3.jpg');
		background-attachment: fixed;
		/* 固定背景图，内容滚动时背景不动 */
		background-repeat: no-repeat;
		background-size: 100% 100%; 
		/* 防止背景图重复 */
		background-position: center;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	}


	.section {
		margin-bottom: 50rpx;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		color: #000;
	}

	.dot {
		width: 36rpx;
		height: 36rpx;
		background-color: #000;
		color: white;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
		margin-right: 15rpx;
		font-size: 28rpx;
	}

	.sub-section {
		margin-left: 20rpx;
		margin-bottom: 30rpx;
	}

	.sub-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #404040;
	}

	.item {
		margin-bottom: 15rpx;
		line-height: 1.8;
	}

	.label {
		font-weight: bold;
		min-width: 120rpx;
		display: inline-block;
		color: #000;
	}

	/* 动画效果 */
	.fade-in {
		animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>